<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <!-- 为windows对象挂载VueRouter构造函数 -->
    <script type="text/javascript" src="js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/user">user</router-link>
        <router-link to="/register">register</router-link>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script>
        const user = {
            template: '<h1>用户</h1>'
        }
        const register = { // 只有一个父节点
            template: `
            <div>
                <h1>注册1</h1>
                <router-link to="/register/tab1/100">tab1</router-link>
                <router-link to="/register/tab2/200">tab2</router-link>
                <router-link to="/register/tab3">tab3</router-link>
                <router-link :to="{name:'mytab',params:{id:300}}">命名路由</router-link>
                <router-view></router-view>
            </div>
            `
        }
        const tab1 = {
            template: `
            <div>
                <h2>tab1:  {{$route.params.id}}</h2>
                <button @click='gotoUser'>按钮</button>
                <button @click='goBack'>后退</button>
            </div>
            `,
            methods: {
                gotoUser: function () {
                    this.$router.push('/user') // 编程式导航
                },
                goBack() {
                    this.$router.go(-1) // 编程式导航
                }
            },
        }
        const tab2 = {
            props: ['id'],
            template: '<h2>tab2：{{id}}</h2>'
        }
        const tab3 = {
            props: ['name', 'age'],
            template: '<h2>tab3：{{name}} --- {{age}}</h2>'
        }
        const router = new VueRouter({
            routes: [{
                    path: '/',
                    redirect: '/user'
                }, {
                    path: '/user',
                    component: user
                },
                {
                    path: '/register',
                    component: register,
                    children: [{
                            path: 'tab1/:id', // 动态路由匹配
                            name: 'mytab',
                            component: tab1
                        },
                        {
                            path: 'tab2/:id',
                            component: tab2,
                            props: true // 通过props进行路由传参
                        },
                        {
                            path: 'tab3',
                            component: tab3,
                            props: {
                                name: 'jack',
                                age: 23
                            } // 通过props进行路由传参
                        }
                    ]
                }
            ]
        })
        var vm = new Vue({
            el: '#app',
            router: router, //挂载路由实例对象
            data: {
                msg: "hello vue"
            }
        })
    </script>
</body>

</html>